<template>
  <div>
    <div class="header">
      <img :src="userInfo.img" alt="" class="img" v-if="userInfo.img" @click="settingup()"/>
      <img src="../../assets/img/head.jpg" alt="" class="img" v-if="!userInfo.img"/>
      <p v-if="!userInfo.phone"  @click="login()">请登录</p>
      <p v-if="userInfo.phone"  @click="settingup()">{{userInfo.phone}}</p>
    </div>
    <div>
      <van-cell title="收藏" icon="description" />
      <van-cell title="我的信息" icon="chat-o" />
      <van-cell title="旅行计划" icon="envelop-o" @click="order"/>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Cell, CellGroup } from "vant";
import my from "../../config/modules/user";
Vue.use(Cell);
Vue.use(CellGroup);
export default {
  data() {
        return {
            // 初始化个人信息对象
            userInfo: {},
        };
    },
    methods:{
        login(){
            this.$router.push("/login")
        },
        settingup(){
            this.$router.push("/settingup")
        },
        order(){
            this.$router.push("/order")
        }
    },
      created() {
    // 进入该组件隐藏底部导航
    this.$store.commit("my/setIsShow", true);
    // console.log(this.$store.state.my.isShow)
    let _token = this.$store.state.my._token;
        if (_token) {
          // console.log(_token)
            this.$http.get(my.getUserInfo).then((ret) => {
              if (ret.err == 0) {
                    // 赋值给初始可变数据
                    this.userInfo = ret.data;
                    console.log(this.userInfo)
                }
            });
        }
  },
};
</script>

<style scoped>
.header {
  height: 300px;
  margin: 6px;
  border: 1px solid #eee;
  text-align: center;
  border-bottom: 4px solid #eee;
}
.img {
  margin-top: 80px;
  width: 150px;
  height: 150px;
  border-radius:50% ;
}
.van-cell {
  color: #888;
}
</style>